<script setup lang="ts">
import { useSubmit } from '@/views/user/use/use-submit';
import { trimBlank } from '@vc/utils';
import { LoginTabEnum, pageCfg } from '../config';
import type { FormInstance } from 'element-plus';
import UserFormItem from '../components/user-form-item.vue';
import PrivacyPolicyFormItem from '../components/privacy-policy-form-item.vue';
import PhoneCode from '../components/phone-code.vue';

interface Props {
  activeName: string;
}

const { activeName } = defineProps<Props>();

// 表单数据
const formData = reactive({
  account: '',
  verifyCode: '',
  checked: true
});

const ruleFormRef = ref<FormInstance>();

const { loading, errMess, handleClick } = useSubmit();

/** 提交 */
const handleSubmit = async () => {
  return await handleClick(
    ruleFormRef.value,
    {
      smsVerifyCode: formData.verifyCode,
      phone: trimBlank(formData.account, 'all')
    },
    'loginPhone'
  );
};

watch(
  () => activeName,
  (val) => {
    if (val === LoginTabEnum.TAB_USER) {
      ruleFormRef.value?.clearValidate();
    }
  }
);
</script>

<template>
  <el-form ref="ruleFormRef" :model="formData" @keypress.enter="handleSubmit">
    <!--account-->
    <div class="input-style">
      <user-form-item v-model:account="formData.account" :placeholder="pageCfg.phonePlaceholder" v-model:errorMess="errMess.account" />
    </div>
    <!--code-->
    <div class="input-style">
      <phone-code :phone="formData.account" prefixIcon="vi-yanzheng" :form="ruleFormRef" v-model:verifyCode="formData.verifyCode" v-model:errorMess="errMess.code" v-model:errorAccountMess="errMess.account" smsType="login" />
    </div>
    <!-- <phone-code :phone="formData.account" :form="ruleFormRef" v-model:verifyCode="formData.verifyCode" v-model:errorMess="errMess.code" v-model:errorAccountMess="errMess.account" smsType="login" /> -->
    <!--submit-->
    <el-form-item>
      <el-button :loading="loading" class="change_color w-full h-52px bg-[#02C680] border-0 text-18px leading-21px font-500 mb-3px mt-38px" type="primary" @click="handleSubmit">登录</el-button>
    </el-form-item>
    <privacy-policy-form-item v-model:checked="formData.checked" />
  </el-form>
</template>

<style lang="scss" scoped>

  :deep(.input-style) {
    .el-form-item {
      margin-bottom: 24px;
    }
    .vc-input {
      height: 52px;
      font-size: 16px;
      flex: 1;
      input::-webkit-input-placeholder {
        color: rgba(153, 153, 153, 1);
      }
      .vc-input__wrapper {
        padding-left: 16px;
        background: rgba(243, 243, 243, 0.6);
        .vc-icon {
          width: 20px;
          height: 20px;
          margin-right: 16px;
        }
        .vc-input__inner {
          // margin-left: 16px;
          font-weight: 400;
          color: #999999;
          line-height: 19px;
      }
      }
    }
    .el-button {
      color:#02C680;
      height: 52px;
      font-size: 16px;
      background-color: rgba(2, 198, 128, 0.10);
      margin-left: 12px;
      padding: 19px 11px;
      font-weight: 500;
      line-height: 14px;
      border: 0;
    }
  }
  :deep(.change_color){
    &:hover{
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
    &:active {
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
    &:focus {
      background-color: rgba(2, 198, 128, 0.5);
      border-color:rgba(2, 198, 128, 0.5);
    }
  }
</style>
